<script>
export default {
  name: "indexPAge",
  data() {
    return {
      class1: "box",
      class2: ['box'],
      flag: false,
      class3: {
        'box': true
      },
      class4: [{'box': true, 'fs30': false}]

    }
  },
  methods: {
    add() {
      this.class1 = this.class1 + 'fs30'
      this.class2.push('fs30')
    }
  }
}
</script>

<template>
  <div>
    <div class="box fs30">aaaaaa</div>
    <div :class="class1">aaaaaa</div>
    <!--  1.数组  -->
    <div :class="class2">aaaaaa</div>
    <!--  2.三目表达式-->
    <div :class="flag?'box':'fs30'">aaaaaa</div>
    <!--  3.对象-->
    <div :class="class3">aaaaaa</div>
    <div :class="{'box':true,'fs30':true}">aaaaaa</div>
    <!--  4.数组内置对象-->
    <div :class="class4">aaaaaa</div>

    <button @click="add">add</button>
  </div>
</template>

<style scoped lang="less">
.box {
  width: 100px;
  height: 100px;
  background-color: #42b983;
}

.fs30 {
  font-size: 30px;
}
</style>